<template>
  <div class="warp">
    <div class="marquee">
      <div class="content">
        <div
            v-for="item in 10"
            :key="item"
            class="item"
            :style="{ '--i': item }"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
.warp {
  padding: 0 100px;
}
.marquee {
  position: relative;
  height: 60px;
  overflow: hidden;

  --c: 8;
  --d: 10s;

  .item {
    position: absolute;
    left: calc(-1 * 100% / var(--c));
    width: calc(100% / var(--c));
    height: 60px;
    background-color: aquamarine;
    animation-name: scrollRight;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    //animation-play-state: paused;
    animation-duration: var(--d);
    animation-delay: calc(-1 * var(--d) / var(--c) * var(--i));

    @keyframes scrollRight {
      to {
        left: 100%;
      }
    }
  }
}
</style>
